<template>
  <div class="leaflet">
    asdf
    <div id="mapDiv"></div>
  </div>
</template>

<style scoped>
#mapDiv {
  height: 700px;
}
</style>
        
<style src="leaflet/dist/leaflet.css">
</style>

<script>
import "leaflet/dist/leaflet.css";
import leaflettestVue from "./leaflettest.vue";
import $L from "./L.TileLayer.Multi";
export default {
  methods: {},
  mounted() {
    //var url = "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png";
    //var url = "http://172.30.160.1:8081/tiles/tiles/{z}/{x}/{y}.png";
    // var url =
    //   "http://127.0.0.1:8081/odm_orthophoto.original_titles/{z}/{x}/{y}.png";
    // // // var url =
    // //  "http://172.30.160.1:8081/odm_orthophoto.original_titles/{z}/{x}/{y}.png";4
    // var url2 =
    //   "https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=9a516b0f2a8179bb68f73172cff4bd22";
    // // // //odm_orthophoto.original_titles
    //初始化 地图，这个view要设置到离线地图的范围，不然什么都没有
    // var leafletMap = L.map("mapDiv", {
    //   center: [46, 91],
    //   minZoom: 5,
    //   maxZoom: 21,
    // });
    //var leafletMap = L.map("mapDiv").setView([-35.121, 112.623], 20);
    // var leafletMap = L.map("mapDiv").setView([-46.842371, -91.9939], 19);
    // var leafletMap = L.map("mapDiv").setView([-32.366063, 119.3734265], 19);
    // var leafletMap2 = L.map("mapDiv").setView([32.366063, 119.3734265], 19);
    // //33.6864, 39.937199
    //46.842371,91.993900
    //32.366063, 119.3734265

    //将图层加载到地图上，并设置最大的聚焦还有map样式
    // L.tileLayer(url2, {
    //   minZoom: 5,
    //   maxZoom: 21,
    //   id: "mapbox.streets",
    // });
    // var layer1 = L.tileLayer(url, {
    //   minZoom: 5,
    //   maxZoom: 21,
    //   id: "mapbox.streets",
    // });

    // L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}", {
    //   foo: "bar",
    //   attribution:
    //     '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    // }).addTo(leafletMap);

    // var baseLayers = {
    //   tianditu: L.tileLayer(
    //     "https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=9a516b0f2a8179bb68f73172cff4bd22",
    //     {
    //       maxZoom: 21,
    //     }
    //   ).addTo(leafletMap2),
    //   Sputnik: L.tileLayer("http://{s}.tiles.maps.sputnik.ru/{z}/{x}/{y}.png", {
    //     maxZoom: 21,
    //   }),

    //   "CartoDB Positron": L.tileLayer(
    //     "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
    //     {
    //       maxZoom: 21,
    //     }
    //   ),

    //   OSM: L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    //     maxZoom: 21,
    //   }),

    //   OpenTopoMap: L.tileLayer(
    //     "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
    //     {
    //       maxZoom: 21,
    //     }
    //   ),
    // };

    // var overlays = {};

    // var a = L.control.layers(baseLayers, overlays).addTo(leafletMap2);
    // this.map.addLayer(layer1);

    var url1 =
      "http://127.0.0.1:8081/odm_orthophoto.original_titles/{z}/{x}/{y}.png";

    var url2 =
      "https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=9a516b0f2a8179bb68f73172cff4bd22";

    // var map = L.map("mapDiv").setView([-32.366063, 119.3734265], 18);
    var map = L.map("mapDiv").setView([32.366063, 119.3734265], 18);
    var tileLayer = $L.TileLayer.multi(
      { 17: { url: url2 }, 21: { url: url1 } },
      { minZoom: 5, maxZoom: 21 }
    ).addTo(map);
    // L.tileLayer(url2, {
    //   zoom: 18,
    //   minZoom: 5,
    //   maxZoom: 21,
    //   center: [-32.366063, 119.3734265],
    // }).addTo(map);
  },
};
</script>
    